<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>"三合一"知识产权信息公共服务平台</title>

	<link rel="stylesheet" type="text/css" href="css/nav.css">
	<link rel="stylesheet" type="text/css" href="css/diagram.css">
	<!-- 图例筛选部分的radio button-->
	<link rel="stylesheet" href="res/minimal/minimal.css">	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/select.js"></script>
	<script type="text/javascript" src="js/icheck.min.js"></script>

	<script type="text/javascript">
		$(function(){
		$(".m1").mouseover(function(){
			$(this).parent().next(".m2").fadeIn();
		}).mouseout(function(){
			$(this).parent().next(".m2").css("display","none");
		});

		$(".m2").mouseover(function(){
			$(this).css("display","block");
			/*$(this).prev().children().css("background-color","#2c85e0").css("color","White");;*/
		}).mouseout(function(){
			$(this).css("display","none");
			/*$(this).prev().children().css("background-color","#bcbcbc").css("color","#3a3a3a");*/
			
		});

		});
	</script>

	<script type="text/javascript">
		$(function(){
		$("#legend1").click(function(){
			if ($("#legend1").css("background-color") == 'rgb(218, 83, 30)'){
				$("#legend1").css("background-color",'gray');
			}else{
				$("#legend1").css("background-color",'#da531e');
			}
		});

		$("#legend2").click(function(){
			if ($("#legend2").css("background-color") == 'rgb(218, 83, 30)'){
				$("#legend2").css("background-color",'gray');
			}else{
				$("#legend2").css("background-color",'#da531e');
			}
		});

		$("#legend3").click(function(){
			if ($("#legend3").css("background-color") == 'rgb(218, 83, 30)'){
				$("#legend3").css("background-color",'gray');
			}else{
				$("#legend3").css("background-color",'#da531e');
			}
		});

		});
	</script>

	<!-- 图例筛选 -->
	<script>
		$(document).ready(function(){
		  $('.tools .item input').iCheck({
		    checkboxClass: 'icheckbox_minimal',
		    radioClass: 'iradio_minimal',
		    increaseArea: '20%' // optional
		  });
		});
	</script>

</head>
<body>
	<!-- 导航部分 -->
	<header id="header">
		<div class="center">
			<div class="logo" onclick="window.open('index.html','_self')"></div>
			
			<div class="menu">
			<a href="government.html"><span class="m1" style="border-left:1px solid #d2d1d1;">政务统计</span></a>	
				<!-- <div class="m2" style="left:0px; color: #727171;"><table>
					<tr><td style="border:0; background-color: white;"><a href="#" target="_blank">区县政务监控</a></td></tr>
					<tr><td><a href="government_country.html" target="_blank">一区多园政务监控</a></td></tr>
					
				</table></div>	 -->
			<a href="garden.html"><span class="m1">园区统计</span></a>
				
			<a href="enterprise.html"><span class="m1">企业统计</span></a>
				<!-- <div class="m2" style="left:262px;"><table>
					<tr><td style="border:0"><a href="#" target="_blank">企业信息查询</a></td></tr>
					<tr><td><a href="#" target="_blank">企业信息监控</a></td></tr>
					<tr><td><a href="#" target="_blank">学院首页</a></td></tr>
				</table></div> -->
			<a href="news.html"><span class="m1">信息发布</span></a>
				
			</div>
			

			<div class="square">
				
			</div>

			<div class="div_login">
				<span style="color: #e58762; font-size: 13px;">欢迎会员</span>	
			</div>
			
			<div class="div_register">
				<a href="register.html" style="color: #e58762; font-size: 13px;">汉之光华</a>			
			</div>
		</div>
	</header>

	<div id="sec"> 
		 <h2 style="display: none;">一区多园政务监控</h2> 
		 <div class="title">
			<div class="title_span"><a href="index.html">"三合一"知识产权信息公共服务平台</a>&nbsp;>>&nbsp;对比图表</div>
			<div class="line_circle_left"></div>
			<div class="line_circle_right"></div>
		
		</div> 

	 </div> 

	<!-- 主体内容区域 因为柱状图、饼状图等都要在这一个页面展示，所以二者都写在了这一个页面
		需要根据图表类型下拉选项动态展示所需要的页面-->
	<section id="section">

		<!-- 这个div用于柱状图的展示 -->
		<div id="graph_zhu">
	 		<div class="graph_title">
	 			杨创园历年知识产权数据对比情况[2014-2015]
	 		</div>
	 		<div class="graph_img">
	 			
	 		</div>
		 </div>

		<!-- 这个div用于饼状图的展示 默认不显示，当点击选择饼状图时，柱状图div隐藏，下面这个div显示-->
		<div id="graph_bing" style="display: none;">
			<div id="table_div">
				<table class="table">
				<tr class="table_title">
					<td></td>
					<td>杨浦园</td>
				</tr>
				<tr class="table_data">
					<td style="background: url('img/table_rightline.png') no-repeat center; background-size: contain;">专利总数</td>
					<td>1231</td>
				</tr>
				<tr class="table_data">
					<td style="background: url('img/table_rightline.png') no-repeat center; background-size: contain;">商标总数</td>
					<td>111</td>
				</tr>
				<tr class="table_data">
					<td style="background: url('img/table_rightline.png') no-repeat center; background-size: contain;">软著总数</td>
					<td>130</td>
				</tr>
			</table>
			</div>

			<div class="graph_zone">
				<div class="graph_title">
	 				杨浦园知识产权数据图表
	 			</div>
	 			<div class="graph_img">
	 			
	 			</div>
			</div>
	 
		</div>

		<!-- 这里是右侧的工具栏 -->
		 <div class="tools">
		 	<form action="" method="">
			 	<div class="tools_bar">
			 		<p>工具栏</p>
					<div class="line_circle_left"></div>
					<div class="line_circle_right"></div>
			 	</div>
			 	
			 	<p class="tools_title">图表内容</p>
			 		<select boxHeight="200" selWidth="160" data='{"list":[
			 		{"value":"1","key":"历年知识产权数据对比"},
			 		{"value":"2","key":"历年知识产权数据对比"},
			 		{"value":"3","key":"历年知识产权数据对比"},
			 		{"value":"4","key":"历年知识产权数据对比"},
			 		{"value":"5","key":"历年知识产权数据对比"},
			 		{"value":"6","key":"历年知识产权数据对比"},
			 		{"value":"7","key":"历年知识产权数据对比"},
			 		{"value":"8","key":"历年知识产权数据对比"},
			 		{"value":"9","key":"历年知识产权数据对比"},
			 		]}'>
			 		</select>
					<br/><br/>
			 	<p class="tools_title">图表类型</p>
			 		<select id="sel_type" selWidth="160" selectedValue="3" data='{"list":[
			 		{"value":"1","key":"曲线图"},
			 		{"value":"2","key":"饼状图"},
			 		{"value":"3","key":"柱状图"},
		
			 		]}'>
			 		</select>
					<br/><br/>
			 	<p class="tools_title">图例筛选</p>
			 		<div>
				 		<div class="item">
							<input type="radio" value="1" id="minimal-checkbox-1" name="iCheck">
		                  	<label style="vertical-align: middle;">专利</label>
						</div>

						<div class="item">
							<input type="radio" value="1" id="minimal-checkbox-1" name="iCheck">
		                  	<label style="vertical-align: middle;">专利</label>
						</div>

						<div class="item">
							<input type="radio" value="1" id="minimal-checkbox-1" name="iCheck">
		                  	<label style="vertical-align: middle;">专利</label>
						</div>
					</div>
					<!-- <div class="legend_item" style="float: left;">
						<input type="radio" value="1" id="minimal-checkbox-1" name="iCheck">
						                  	<label style="vertical-align: middle;">Checkbox 1</label>
						<div id="legend1" class="circle">
							
						</div>
						<span class="text">
							专利
						</span>
					</div> -->
					<!-- <div class="legend_item" style="float: left;">
						<div id="legend2" class="circle">
							
						</div>
						<span class="text">
							专利
						</span>
					</div>
					<div class="legend_item" style="margin-top: 30px;">
						<div id="legend3" class="circle">
							
						</div>
						<span class="text">
							专利
						</span>
					</div> -->
					

			 	<p  class="tools_title" style="clear: none;margin-top: 60px;">时间筛选</p>
			 		<select  selWidth="80" data='{"list":[
			 		{"value":"1","key":"2016"},
			 		
			 		]}'>
			 		</select>
			 		<select boxHeight="200" selWidth="40" data='{"list":[
			 		{"value":"1","key":"1"},
			 		{"value":"2","key":"2"},
			 		{"value":"3","key":"3"},
			 		{"value":"4","key":"4"},
			 		{"value":"5","key":"5"},
			 		{"value":"6","key":"6"},
			 		{"value":"7","key":"7"},
			 		{"value":"8","key":"8"},
			 		{"value":"9","key":"9"},
			 		{"value":"10","key":"10"},
			 		{"value":"11","key":"11"},
			 		{"value":"12","key":"12"},
			 		]}'>
			 		</select>
			 		<span style="margin-left: 10px;">至</span>
					<br/><br/>
					<select  selWidth="80" data='{"list":[
			 		{"value":"1","key":"2016"},
			 		
			 		]}'>
			 		</select>
			 		<select boxHeight="200" selWidth="40" data='{"list":[
			 		{"value":"1","key":"1"},
			 		{"value":"2","key":"2"},
			 		{"value":"3","key":"3"},
			 		{"value":"4","key":"4"},
			 		{"value":"5","key":"5"},
			 		{"value":"6","key":"6"},
			 		{"value":"7","key":"7"},
			 		{"value":"8","key":"8"},
			 		{"value":"9","key":"9"},
			 		{"value":"10","key":"10"},
			 		{"value":"11","key":"11"},
			 		{"value":"12","key":"12"},
			 		]}'>
			 		</select>
			 		
			 	</form>
			 </div>
	</section>

	<div id="table_zhu">
			<table class="table">
				<tr class="table_title">
					<td></td>
					<td>2010</td>
					<td>2011</td>
					<td>2012</td>
					<td>2013</td>
					<td>2014</td>
					<td>2015</td>
				</tr>
				<tr class="table_data">
					<td style="background: url('img/table_rightline.png') no-repeat center; background-size: contain;">专利</td>
					<td>35</td>
					<td>134</td>
					<td>112</td>
					<td>267</td>
					<td>205</td>
					<td>478</td>
				</tr>
				<tr class="table_data">
					<td style="background: url('img/table_rightline.png') no-repeat center; background-size: contain;">商标</td>
					<td>12</td>
					<td>13</td>
					<td>17</td>
					<td>16</td>
					<td>23</td>
					<td>30</td>
				</tr>
				<tr class="table_data">
					<td style="background: url('img/table_rightline.png') no-repeat center; background-size: contain;">软著</td>
					<td>10</td>
					<td>24</td>
					<td>14</td>
					<td>35</td>
					<td>32</td>
					<td>45</td>
				</tr>
			</table>
		</div>
	 
	

	<script type="text/javascript">
		$(function(){
			$("#sel_type").bind("change", function(){
				if(!$(this).attr("relValue")){
		        	alert("没有选择节点");
			    }else{
			        // alert("选中节点文本："+$(this).attr("relText")+"<br/>选中节点值："+$(this).attr("relValue"));
			        var value = $(this).attr("relValue");
			        if (value == 3){
			        	//选了柱状图
			        	$("#graph_bing").css("display", "none");
			        	$("#graph_zhu").css("display", "block");
			        	$("#table_zhu").css("display", "block");
			        }else if (value == 2){
			        	//选了饼图
			        	$("#graph_bing").css("display", "block");
			        	$("#graph_zhu").css("display", "none");
			        	$("#table_zhu").css("display", "none");
			        }
			    }
			})
		})
	</script>
</body>
</html>